<template>
  <div class="uListContainer" :style="{minHeight:screenHeight}">
      <yl-search :submit="search" :ylstyle=" searchStyle" style="position:fixed;z-index:100;width:100%"></yl-search>
      <!-- 滚动加载数据 -->
      <yd-infinitescroll :callback="loadList" class="ulist">
        <div slot="list" :list="list" :listClick="listClick">
          <div class="List-title">
            <img src="./img/latest.png">
            <div class="mid">
              <p>我的附近</p>
              <span>{{list.length}}人在线（{{distance}}米范围内）</span>
            </div>
          </div>
          <!--用户列表-->
          <yl-list   v-for="(item,index) in list" :key="index">
            <img :src="item.photo"  @touchstart="listClick(index)">
            <div class="mid">
              <p>{{item.name}}</p>
              <!-- <span>{{item.uMsg}}</span> -->
            </div>
            <div class="time">
              <!-- {{item.msgTime}} -->
            </div>
          </yl-list>
        </div>
        <span slot="doneTip">没有更多人了</span>
     </yd-infinitescroll>
  </div>
</template>
<script>
import ylSearch from '@/components/search'
import ylList from '@/components/list'
export default {
    data(){
        return{
            searchStyle:{
                height:'0.9',//高度，必须
                bgcolor:'#EF8356',//背景，可选
                remind:'搜索想找的人',//placeholder可选
                close:true, //开关 可选
            },
            list: [
                    // {
                    //     img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
                    //     uname: "标题标题标题标题标题",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },
                    // {
                    //     img: "http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",
                    //     uname: "骆驼男装",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },
                    // {
                    //     img: "http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",
                    //     uname: "条纹短",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },
                    // {
                    //     img: "http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",
                    //     uname: "夏季青少年衣服男",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },
                    // {
                    //     img: "http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",
                    //     uname: "2016夏装新款",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },
                    // {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },
                    //   {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },    {
                    //     img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
                    //     uname: "男装衣服",
                    //     uMsg: 56.23,
                    //     msgTime: 89.36
                    // },
                ],
            screenHeight:document.body.clientHeight+"px",
            // online:this.list.length,
            distance:'1500'
        }
    },
    components:{
        ylSearch,ylList
    },
  methods:{
    search(e){//搜索
        e.preventDefault();
    },
    loadList(){//滚动到底部事件
        alert("莫滚了，莫得了，你滚啥")
    },
    listClick(index){//点击用户头像事件
        console.log(index)
    },
    update(){//数据更新
        let data={
        lat:JSON.stringify(this.$store.state.locations.lat),
        lng:JSON.stringify(this.$store.state.locations.lng),
        userId:localStorage.userid,
        }
         this.ylAjax.around(data)
            .then(res=>{
                console.log(res)
                this.list=res.data
            })
    }
  },
  mounted(){
      this.update()
      console.log(this.list)
  }
}
</script>

<style lang="less" scoped>
@import "~less/base";
.uListContainer{
    position: absolute;
    top: 0;
    width: 100%;
    background-color: @home-bg;
    .ulist{//拉开标签与顶部距离
        margin-top:1rem;
      .List-title{//列表首项
        position: relative;
        height:1.22rem;
        line-height:1.22rem;
        border-bottom: 1px solid  @color-border4;
        img{//附近人标识
          width:1rem;
          border-radius: 50%;
          border:1px solid @color-border5;
          padding: .2rem;
          margin-left: .2rem;
        }
        .mid{
          position: absolute;
          top: 0;
          left: 18%;
          line-height: 2;
          max-width: 60%;
          span{
            color:@color-c2;
          }
        }
      }
    }
}
</style>
